<template>
       <div class="dd1">
        <van-icon name="arrow-left" /><span class="p1">订单结算</span>
    </div>
   <div class="dd3">
    <div class="ddd2">
            <img src="@/assets/dz.jpg" class="im"/>
        </div>
    <div class="ddd3">    
        <p>OMINI.BASS <span>86-18802155485</span></p>
        <span>福建省厦门市翔安区某个镇某个村厦门<br/>市翔安区某个镇某个村69号</span>
        <p>收货不便时，选择下方服务网点，可享受面肥代收服务</p>
        <p>发送商品及物流动态（含取件码）给收货人<input type="checkbox" class="in"/></p>
    </div>
   </div>
   <div class="dd4">
    <span>OMINI定制</span>
    <van-card
        num="1"
        price="539.99"
        desc="淡金色【10cm】"
        title="法国BDM大画圈耳环女网红欧美夸张时尚耳圈"
        thumb="@/assets/qq.png"
        >     
</van-card>
        <p>优惠卷<span>满500减20</span><van-icon name="arrow" /></p>
        <p>配送方式<span>普通方式</span><span>快递  免邮</span><van-icon name="arrow" /></p>
        <p><span>运费险</span><span>确认收货前退货退货可<br/>赔付19元</span><span>￥ 1.2元 <van-checkbox v-model="checked1"></van-checkbox></span></p>
        <p><span>订单备注</span><span>选填，请先和商家协商一致</span></p>
        <p><span>共1件</span><span>小计：</span><span>￥519.99</span></p>     
</div>
<van-checkbox v-model="checked">匿名购买</van-checkbox>

<div>
<div class="db">
    <p>
        <span>共1页</span><span>合计：</span><span>￥39.99</span><button>提交订单</button>
    </p>
</div>
</div>
</template>
<script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue';
    import axios from 'axios'
     const checked = ref(true);
      const checked1 = ref(true);
    // axios.get('https://console-mock.apipost.cn/app/mock/project/b0e8c554-8b0c-4a31-bfda-edfab429f639/app/mock/project/b0e8c554-8b0c-4a31-bfda-edfab429f639/list')
    // .then((res: any)=>{
    //     console.log(res);
        
    // })
    
</script>
<style scoped>
    .dd1{
       width: 100%;
       height: 50px;
       font-size: 16px;
       font-weight: bold;
       margin-left: 5%;
       margin-top: 5%;
    }
    .p1{
        margin-left: 30%;
    }
    .dd2{
        border: 1px solid #c1ab96;
    }
    .ddd1{
        width: 100%;
        height: 100px;
        color: white;
        margin-left: 5%;
    }
    .p2{
        margin-left: 5%;
    }
    .dd3{
        width: 90%;
        height: 150px;
        border: 1px solid #c1ab96;
        background-color: white;
        font-size: 12px;
        border-radius: 10px 10px 10px 10px;
        margin-top: 5%;margin-left: 5%;
    }
    .im{
        margin-top: 40%;
    }
    .ddd2{
         height: 100%;
        width: 19%;
        float: left;
    }
    .ddd3{
        width: 80%;
        height: 100%;
       float: left;
    }
    .dd4{
        width: 90%;
        margin-top: 5%;
        margin-left: 5%;
        border: 1px solid #c1ab96;
    }
    .dd4 p{
        margin-left: 10%;
    }
    .dd4 span{
        margin-left: 5%;
    }
    span1{
        margin-left: 5%;
    }
   .db{
    width: 100%;
    border-top: 1px solid #c1ab96;
   }
</style>